<template>
  <div class="Ord-content">
    <div class="sai">
      <div class="sai-imgs">
        <img style="width:16px;height:16px;" src="../assets/shaixuan.png" alt />
      </div>
      <div class="sai-span">
        <span>筛选</span>
      </div>
    </div>
    <div class="Ord-label">
      <div class="hot">
        <p>
          <span>活动状态</span>
          <span style="color: red;">*</span>
          <span>:</span>
        </p>

        <el-select v-model="value" placeholder="全部" class="sx">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="label">
        <span>搜索输入：</span>
        <slot>
          <div class="label-input">
            <input type="text" placeholder="输入课程标题关键字..." />
          </div>
        </slot>
      </div>
      <div class="sub">
        <span>提交时间：</span>
        <div>
          <div class="block sub-input">
            <el-date-picker class="input" v-model="value1" type="date" placeholder="开始日期"></el-date-picker>
          </div>
        </div>
        <span class="sub-span">—</span>
        <div>
          <div class="block sub-input1">
            <el-date-picker class="input" v-model="value2" type="date" placeholder="结束日期"></el-date-picker>
          </div>
        </div>
      </div>
      <div class="btn">
        <img src="../assets/btnBG.png" alt />
        <span>筛选</span>
      </div>
      <p class="qingchu">清空筛选条件</p>
    </div>
  </div>
</template>
<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      options: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "上架",
        },
        {
          value: "选项3",
          label: "下架",
        },
      ],
      value: "",

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.Ord-content {
  position: relative;
  left: 20px;
  top: 20px;
  width: 1100px;
  height: 197px;
}
.sai {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1100px;
  height: 197px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  border-radius: 2px;
}
.sai-imgs {
  position: relative;
  left: 30px;
  top: 20px;

}
.sai-imgs img {
  position: relative;
  top: 4px;
  width: 16px;
  height: 16px;
}
.sai-span {
  border-width: 0px;
  position: relative;
  left: 50px;
  top: 1px;
  width: 50px;
  height: 21px;
  color: #999999;
}
.Ord-label {
  border-width: 0px;
  position: relative;
  left: 30px;
  top: 60px;
  width: 73px;
  height: 21px;
}
.label {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 75px;
  width: 73px;
  height: 21px;
}
.Ord-label span {
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: left;
}
.label-input {
  position: relative;
  left: 77px;
  top: -28px;
  width: 185px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  border-radius: 3px;
  box-shadow: none;
}
.label-input input {
  border-width: 0px;
  position: absolute;
  left: 10px;
  top: 5px;
  width: 163px;
  height: 25px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  text-decoration: none;
  text-align: left;
  border-color: transparent;
  outline-style: none;
  padding: 1px 0px 1px 0px;
  box-sizing: border-box;
}
.sub {
  position: relative;
  left: 320px;
  top: -16px;
  width: 441px;
  height: 37px;
  background-image: none;
}

.sub-input {
  position: relative;
  left: 70px;
  top: -28px;
  width: 163px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  border-radius: 3px;
  box-shadow: none;
}
.input {
  width: 163px;
  height: 37px;
}
.sub-span {
  border-width: 0px;
  position: absolute;
  left: 243px;
  top: 3px;
  width: 16px;
  height: 21px;
  color: #cccccc;
  border-width: 0px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
}
.sub-input1 {
  position: relative;
  left: 268px;
  top: -65px;
  width: 163px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  border-radius: 3px;
  box-shadow: none;
}
.btn {
  width: 98px;
  height: 36px;
  line-height: 36px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 318px;
  top: 68px;
  background: inherit;
  background-color: rgba(145, 55, 243, 1);
  border: none;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.btn span {
  color: #ffffff;
  margin-left: 10px;
}
.Ord-content .sub-input,
.Ord-content .sub-input1 {
  border: 0px;
}
.qingchu {
  border-width: 0px;
  position: absolute;
  left: 430px;
  top: 77px;
  width: 73px;
  height: 18px;
  font-size: 12px;
  color: #9137f3;
  box-shadow: none;
  font-family: "思源黑体";
  font-weight: 400;
  cursor: pointer;
  font-style: normal;
}
.hot p {
  border-width: 0px;
  position: relative;
  left: 0px;
  top: 8px;
  width: 92px;
  height: 21px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
  text-align: left;
}
.sx {
  border-width: 0px;
  position: absolute;
  left: 77px;
  top: 0px;
  width: 184px;
  height: 37px;
}
</style>